<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="sort.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <title>瀑布流</title>
  </head>
  <body>
    <div id="a">
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione in
            ab dolorem fuga pariatur hic soluta laboriosam, aspernatur, iure
            explicabo ad consectetur blanditiis! Libero dignissimos dolor, magni
            deleniti aut odio.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
            eveniet? Quo numquam dolorem quis dicta expedita ullam voluptatum?
            Laborum accusamus optio repellendus voluptate illum sit iusto labore
            expedita ipsa vero.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci
            nam incidunt odio nesciunt quae culpa amet voluptates ullam sunt
            quibusdam ad suscipit deleniti facilis ipsum aut voluptas, sequi
            dolorem nulla!
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>dsjadlkjslajldsajldjsaljdlasj</h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
            amet adipisci reiciendis. Officiis tenetur ab hic, et facere
            possimus commodi quaerat cum. Inventore, eos laboriosam quas quam
            rerum excepturi cum?
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. In numquam
            placeat voluptate illo voluptas consequatur labore obcaecati
            nostrum, et corrupti accusantium ab ipsum harum architecto nesciunt
            amet itaque natus neque.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
            minus reiciendis commodi magni adipisci incidunt harum impedit
            numquam quaerat, a suscipit, deleniti omnis vero laudantium sint
            nulla quia? Veniam, officia.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
            ipsa beatae ullam, illo inventore quod natus eos sapiente quisquam!
            Est perferendis repellat voluptatem asperiores! Nesciunt, qui! Ut
            aliquam maiores officiis.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eius
            ad iste nisi placeat veniam labore ut vero delectus voluptate in
            unde quibusdam sapiente saepe, eum deserunt atque animi dignissimos!
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit
            beatae laborum voluptates ex et libero accusamus sit nisi quo quas
            corporis, aliquam, incidunt porro, commodi dicta deserunt. Minus, ab
            voluptatibus!
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eius
            ad iste nisi placeat veniam labore ut vero delectus voluptate in
            unde quibusdam sapiente saepe, eum deserunt atque animi dignissimos!
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit
            beatae laborum voluptates ex et libero accusamus sit nisi quo quas
            corporis, aliquam, incidunt porro, commodi dicta deserunt. Minus, ab
            voluptatibus!
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
            nisi, molestias dicta nulla repudiandae vero dolorem assumenda.
            Repudiandae est ab voluptatem, odit culpa in fugiat porro voluptate
            sed illum tempora!
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam et
            quasi reprehenderit, tempora optio aut ut voluptas maiores, iste
            quos nihil pariatur recusandae fugit harum consectetur blanditiis,
            amet eos! Dolores!
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Consequuntur delectus velit pariatur amet cupiditate id officia
            magni deleniti eum ducimus? Ea ullam necessitatibus est laudantium
            ad ratione ab ipsam dolore?
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis
            eaque voluptatum, veniam possimus necessitatibus vitae itaque
            accusantium adipisci dignissimos nihil. Rerum aliquid voluptas
            doloribus aspernatur laudantium placeat maxime officiis doloremque.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. In est
            neque excepturi eligendi voluptate qui corporis, ipsum vel vitae.
            Facilis dolorem temporibus corrupti fugiat numquam illum eligendi,
            repellat ea tenetur.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
            perspiciatis iste dignissimos, obcaecati tenetur, fugiat totam hic
            illum commodi eligendi explicabo beatae eos illo nihil voluptates!
            Tenetur minus incidunt ducimus.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
            perspiciatis iste dignissimos, obcaecati tenetur, fugiat totam hic
            illum commodi eligendi explicabo beatae eos illo nihil voluptates!
            Tenetur minus incidunt ducimus.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
            perspiciatis iste dignissimos, obcaecati tenetur, fugiat totam hic
            illum commodi eligendi explicabo beatae eos illo nihil voluptates!
            Tenetur minus incidunt ducimus.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
            perspiciatis iste dignissimos, obcaecati tenetur, fugiat totam hic
            illum commodi eligendi explicabo beatae eos illo nihil voluptates!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
            perspiciatis iste dignissimos, obcaecati tenetur, fugiat totam hic
            illum commodi eligendi explicabo beatae eos illo nihil voluptates!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
            perspiciatis iste dignissimos, obcaecati tenetur, fugiat totam hic
            illum commodi eligendi explicabo beatae eos illo nihil voluptates!
            Tenetur minus incidunt ducimus. Tenetur minus incidunt ducimus.
            Tenetur minus incidunt ducimus.
          </h2>
        </div>
      </div>
      <div class="box">
        <div class="pic">
          <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
            perspiciatis iste dignissimos, obcaecati tenetur, fugiat totam hic
            ilhhhhhmos, obcaecati tenetur, fugiat totam hic illum commodi
            eligendi explicabo beatae eos illo nihil voluptates! Tenetur minus
            incidunt ducimus. Tenetur minus incidunt ducimus. Tenetur minus
            incidunt ducimus.
          </h2>
        </div>
      </div>
    </div>
    <script>
      function waterFall(parent, box) {
        // 将a下的全部box取出来
        var oParent = jQuery("#" + parent);
        // 获得类名为box的数组
        var boxes = jQuery("." + box);

        // 计算显示的列数（页面的宽/box的宽）
        var oBoxWeight = boxes[0].offsetWidth;
        // console.log(oBoxWeight);
        //333 + 内边距 10 * 2 + 边框 1 * 2 + （填充）15 == 370
        var cols = Math.floor(
          document.documentElement.clientWidth / oBoxWeight
        );
        // console.log(cols);
        // 设置a的宽度
        oParent.css("width", cols * oBoxWeight + "px");
        oParent.css("margin", "0 auto");

        // 存放第该列（位置正确摆放的多个div高度）的高度的数组
        // 第一次，则是第一行每个div的高度
        var hArr = [];
        for (var i = 0; i < boxes.length; i++) {
          if (i < cols) {
            hArr.push(boxes[i].offsetHeight);
          } else {
            var minH = Math.min.apply(null, hArr); //top
            var index = getMinhIndex(hArr, minH);
            // boxes[i].css("position", "absolute"); //绝对定位
            // boxes[i].css("top", minH + "px");
            // obxes[i].css("left", oBoxWeight * index + "px");
            boxes[i].style.position = "absolute"; //绝对定位
            boxes[i].style.top = minH + "px"; //坐标top
            boxes[i].style.left = oBoxWeight * index + "px"; //坐标left
            //处理盒子重叠
            hArr[index] += boxes[i].offsetHeight;
          }
        }
        console.log(hArr);
        // left -> 左边三个div的宽，top-> 最小高
      }
      waterFall("a", "box");
      // var dataInt = {"data":{"src":'病人.png'}};
      // window.onscroll = function () {
      //   if( checkScrollSlide()) {
      //      //.....记载dataInt到页面
      //      //再调用一下瀑布流调整~
      //   }
      // };
      // // 检测是否具备了滚动后是否可以加载的条件
      // function checkScrollSlide() {
      //   var oParent = jQuery("#a");
      //   var boxes = jQuery(".box");
      //   var lastBoxH =
      //     boxes[boxes.length - 1].offsetTop +
      //     Math.floor(boxes[boxes.length - 1].offsetHeight / 2);
      //   var scrollTop =
      //     document.body.scrollTop || document.documentElement.scrollTop;

      //   var height =
      //     document.body.clientHeight || document.documentElement.clientHeight;

      //   return lastBoxH < scrollTop + height;
      // }

      function getMinhIndex(arr, val) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == val) {
            return i;
          }
        }
      }
    </script>
  </body>
</html>
